<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title></title>
		<link rel="stylesheet" href="./Bootstrap4.6.1/css/bootstrap.css">
		<script src="./Bootstrap4.6.1/js/jquery.js"></script>
		<script src="./Bootstrap4.6.1/js/bootstrap.bundle.js"></script>
		<style>
			.top-nav h1{
				text-align: center;
				margin: 1rem 0;
			}
			.top-nav>img{
				display: none;
			}
			.top-nav .top-sub-nav{
				display: flex;
				justify-content: space-around;
				background-color: black;
				padding: 0 5rem;
			}
			.top-nav .top-sub-nav > div{
				background-color: #fff;
				margin: 1rem 0;
				padding: 1rem;  
				border-radius: 5px;
			}
			/* 在中屏的时候 */
			@media screen and (max-width:991px) {
				.top-nav .top-sub-nav{
					padding: 0 ;
				}
			}
			
			@media screen and (max-width:767px){
				.top-nav>img{
					display: block;
				}
				.top-nav .top-sub-nav{
					display: none;
				}
				.top-nav:hover .top-sub-nav{
					display: flex;
					padding: 1rem;
					text-align: center;
				}
			}
			
			/* 中间区域 */
			.main .main-img{
				margin: 1rem 0;
			}
			.main .main-row-01{
				text-align: center;
			}
			.main .main-row-01 .title01{
				font-weight: bold;
			}
			
			.main .main-row-02 > div{
				background-color: black;
				color: white;
				border-radius: 5px;
				text-align: center;
				padding: 0.5rem;
				margin: 0.5rem;
			}
			
			.main .main-row-03 .title02{
				text-align: center;
				margin: 1rem;
			}
			.main .main-row-03 > div{
				margin: 0.5rem;
				text-align: center;
			}
			.main .main-row-03 > div *:nth-child(2){
				font-weight: bold;
			}
			.main .main-row-03 > div *:nth-child(4){
				background-color: black;
				color: #fff;
				border-radius: 5px;
				padding: 1rem 0;
				margin: 1rem 2rem;
			}
		</style>
	</head>
	<body>
		<div class="container-fluid top-nav">	
			<h1>AdMaster</h1>
			<img src="./img/1.png" alt="">
			<div class="top-sub-nav row">
				<div>Home</div>
				<div>solution</div>
				<div>Market Lnsights</div>
				<div>College</div>
				<div>About Us</div>
			</div>
		</div>
		<div class="container main">
			<div class="main-img"><img class="w-100" src="./img/pic01.jpg" alt=""></div>
			<div class="row main-row-01 justify-content-between">
				<div class="col-12 col-md-3">
					<img src="./img/2.jpg" alt="">
					<div class="title01">Ipsum consequat</div>
					<div>Nisl amet dolor sit ipsum veroeros sed blandit consequat veroeros et magna tempus.</div>
				</div>
				<div class="col-12 col-md-3">
					<img src="./img/3.jpg" alt="">
					<div class="title01">Ipsum consequat</div>
					<div>Nisl amet dolor sit ipsum veroeros sed blandit consequat veroeros et magna tempus.</div>
				</div>
				<div class="col-12 col-md-3">
					<img src="./img/4.jpg" alt="">
					<div class="title01">Ipsum consequat</div>
					<div>Nisl amet dolor sit ipsum veroeros sed blandit consequat veroeros et magna tempus.</div>
				</div>
				
			</div>
			<div class="row main-row-02 justify-content-center">
				<div class="col-12 col-md-2">Get Started</div>
				<div class="col-12 col-md-2">Learn More</div>
			</div>
			<div class="row main-row-03 justify-content-between">
				<h1 class="col-12 title02">My Portfolio</h1>
				<div class="col-12 col-lg-3 col-md-5">
					<img class="w-100" src="./img/pic02.jpg" alt="" srcset="">
					<div >Ipsum feugiat et dolor</div>
					<div>Lorem ipsum dolor sit amet sit veroeros sed amet blandit consequat veroeros lorem blandit adipiscing et feugiat phasellus tempus dolore ipsum lorem dolore.</div>
					<div>Find out more</div>
				</div>
				<div class="col-12 col-lg-3 col-md-5">
					<img class="w-100" src="./img/pic02.jpg" alt="" srcset="">
					<div>Ipsum feugiat et dolor</div>
					<div>Lorem ipsum dolor sit amet sit veroeros sed amet blandit consequat veroeros lorem blandit adipiscing et feugiat phasellus tempus dolore ipsum lorem dolore.</div>
					<div>Find out more</div>
				</div>
				<div class="col-12 col-lg-3 col-md-5">
					<img class="w-100" src="./img/pic02.jpg" alt="" srcset="">
					<div>Ipsum feugiat et dolor</div>
					<div>Lorem ipsum dolor sit amet sit veroeros sed amet blandit consequat veroeros lorem blandit adipiscing et feugiat phasellus tempus dolore ipsum lorem dolore.</div>
					<div>Find out more</div>
				</div>
				<div class="col-12 col-lg-3 col-md-5">
					<img class="w-100" src="./img/pic02.jpg" alt="" srcset="">
					<div>Ipsum feugiat et dolor</div>
					<div>Lorem ipsum dolor sit amet sit veroeros sed amet blandit consequat veroeros lorem blandit adipiscing et feugiat phasellus tempus dolore ipsum lorem dolore.</div>
					<div>Find out more</div>
				</div>
				<div class="col-12 col-lg-3 col-md-5">
					<img class="w-100" src="./img/pic02.jpg" alt="" srcset="">
					<div>Ipsum feugiat et dolor</div>
					<div>Lorem ipsum dolor sit amet sit veroeros sed amet blandit consequat veroeros lorem blandit adipiscing et feugiat phasellus tempus dolore ipsum lorem dolore.</div>
					<div>Find out more</div>
				</div>
				<div class="col-12 col-lg-3 col-md-5">
					<img class="w-100" src="./img/pic02.jpg" alt="" srcset="">
					<div>Ipsum feugiat et dolor</div>
					<div>Lorem ipsum dolor sit amet sit veroeros sed amet blandit consequat veroeros lorem blandit adipiscing et feugiat phasellus tempus dolore ipsum lorem dolore.</div>
					<div>Find out more</div>
				</div>
			</div>
			
		</div>
		<div class="container-fluid">
			底部
			
		</div>
		
		
		
		
		<div class="top-nav container">
			
		</div>
	</body>
</html>